var vm = new Vue({
    el:"#showVideoList",
    data:{
        searchBtnLoading:false,
        keyword:'',
        pageNum:1,
        pageSize:10,
        total:0,
        options: [{
            value: '黄金糕',
            label: '黄金糕'
        }, {
            value: '双皮奶',
            label: '双皮奶'
        }, {
            value: '蚵仔煎',
            label: '蚵仔煎'
        }, {
            value: '龙须面',
            label: '龙须面'
        }, {
            value: '北京烤鸭',
            label: '北京烤鸭'
        }],
        status:[
            {
                value: '1',
                label: '在用'
            },
            {
                value: '2',
                label: '禁用'
            }
        ],
        value: '',
        tableData: [],
        ruleForm:{//搜索框数据
            name:'',
            type:'',
            status:'启用',
            startTime:'',
            endTime:''
        },
        //显示弹框
        spxzVisible: false,
        //图片地址
        imageUrl: '',
        formData:{//添加视频弹出框表单信息
            videoName:'',
            videoType:'',
            videoDuration:'',
            videoJj:'',
            videoStatus:'启用',
            file:'',
            video:''
        },
        dialogVisible:false,//查看大图判断
        dialogImageUrl: '', // 图片
        showFileFlag:true,
        fileList:[],
        loading:false,
        videoFlag:false,
        fileLoading:false,
        formObj:new FormData(),
        rules:{
            videoName:[{required: true, message: '必填项', trigger: 'blur'}],
            file:[{required: true, message: '请上传图片' }],
            video:[{required: true, message: '请上传视频' }],
            videoType:[{required: true, message: '必填项',trigger: ['blur', 'change'] }],
            videoDuration:[{required: true, message: '必填项',trigger: ['blur', 'change'] }],
            // videoStatus:[{required: true, message: '必填项',trigger: ['blur', 'change'] }],
            videoJj:[{required: true, message: '必填项',trigger: ['blur', 'change'] }]
        }
    },
    created:function () {
        this.init();
    },
    mounted:function () {

    },
    methods:{
        init:function(){
            this.getVideoListData();
        },
        handleSizeChange: function (val) {
            this.pageSize = val;
            this.getVideoListData();
        },
        handleCurrentChange: function (val) {
            this.pageNum = val;
            this.getVideoListData()
        },
        // 阻止upload的自己上传，进行再操作
        beforeupload (file) { 
            var vm = this;
            var isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!');
            }

            return false
        },
        // 图片预览
        handlePictureCardPreview (file) {
            var vm = this;
            vm.formData.file=file.raw;
            vm.imageUrl = URL.createObjectURL(file.raw);
            vm.dialogImageUrl = file.url
        },

        getVideoListData:function(){
            var vm = this;
            vm.keyword = '';
            $.ajax({
                url:'/video/list',
                dataType:'json',
                type: 'POST',
                data:{
                    keyword:vm.keyword,
                    pageNum:vm.pageNum,
                    pageSize:vm.pageSize
                },
                success:function(data){
                    if(data.success){
                        console.log(data.content);
                        vm.tableData = data.content.list;
                        vm.total = data.content.total;
                    }
                },
                error:function () {
                    vm.$message.error('获取视频数据失败！');
                }
            })
        },
        //点击上传的video
        handlePreview(file) {
            console.log(file);
        },
        loadVideo:function(file,fileList){
            vm.formData.video = file.raw;
        },
        //上传限制
        handleExceed(files, fileList) {
            this.$message.warning('当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件');
        },
        //移除资源前访问
        beforeRemove(file, fileList) {
            if(['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1&& file.size / 1024 / 1024  > 100){
                return this.$confirm('确定移除'+ file.name +'？');
            }
        },
        //查询数据
        submitForm(formName) {
            this.$refs[formName].validate(function (valid) {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //重置查询按钮
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //点击立即添加按钮
        onSubmit:function (formName) {
            debugger
            var vm = this;
            this.$refs[formName].validate(function (valid) {
                if (valid) {
                    if(vm.formData.video){
                        var isLt100M = vm.formData.video.size / 1024 / 1024  < 100;
                        if (['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'].indexOf(vm.formData.video.type) == -1) {
                            vm.$message.error('请上传正确的视频格式');
                            vm.showFileFlag = false;
                            return false;
                        }
                        if (!isLt100M) {
                            vm.$message.error('上传视频大小不能超过100MB哦!');
                            vm.showFileFlag = false;
                            return false;
                        }
                    }
                    vm.loading = true;
                    vm.formObj.append("videoName",vm.formData.videoName);
                    vm.formObj.append("videoType",vm.formData.videoType);
                    vm.formObj.append("videoDuration",vm.formData.videoDuration);
                    vm.formObj.append("videoJj",vm.formData.videoJj);
                    vm.formObj.append("videoStatus",vm.formData.videoStatus);
                    vm.formObj.append("file",vm.formData.video);
                    vm.formObj.append("file",vm.formData.file);
                    console.log(vm.formData)
                    $.ajax({
                        url: '/file/upload',
                        data: vm.formObj,
                        type: 'POST',
                        dataType: 'json',
                        cache: false,
                        processData: false,
                        contentType: false,
                        success: function (data) {
                            vm.loading = false;
                            vm.$message.success(data.messgae);
                            //再次请求获取视频信息的接口
                        },
                        error:function () {
                            vm.loading = false;
                            vm.formObj = new FormData();
                            vm.$message.error("添加失败！！");
                }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
});



